<template>
	<!-- {{}} 模板语法 在模板中插值 -->
	<view class="music-list">
		  <view class="list-box">
			   <!-- v-for="(item,i) in arr"  循环，重复执行
				item 是一个变量 ，代表数组的每一项数据
				i   是数组的下标
				-->
			  <view class="op" v-for="(item,i) in arr">
				  <view class="left">
					  <text class="txt">{{i + 1}}</text> .
					  <text>{{item.name}}</text>
				  </view>
				  <view class="right"  @click="jumpToPlay(item.id,item.name)" >
					  <image class="img" src="../../static/music.png" mode="widthFix"></image>
				  </view>
			  </view>
		  </view>
		  <!-- v-if="arr.length == 0"  条件渲染   用于判断 -->
		  <view class="list-msg" v-if="arr.length == 0">
			  <text>暂无歌曲列表~~</text>
		  </view>
	</view>
</template>

<script>
	export default {
		name:"music-list",
		// 自定义属性 接收父组件传递的数据
		props: {
			arr: {
				type: Array
			}
		},
		// 编写方法
		methods: {
			//跳转页面
			jumpToPlay(id,name){
				//调用页面的API
				uni.navigateTo({
					url: `../play/play?id=${id}&name=${name}`
				})
			}
		}
		
	}
</script>

<style>
	.music-list {
		padding: 10px 15px;
	}
	.list-msg {
		padding: 50px 0;
		text-align: center;
		color: #666;
	}
	.list-box {
		width: 100%;
	}
	.list-box .op {
		width: 100%;
		display: flex;
		/* 设置子元素两端对齐 */
		justify-content: space-between;
		padding: 10px 0px;
		align-items: center;
		/* 下边框线 */
		border-bottom: 1px solid #7FCD91;
	}
	.list-box .op .left .txt {
		font-size: 40px;
		font-style: italic;
		color: #7FCD91;
	}
	.list-box .op .right .img {
		width: 28px;
		height: 28px;
	}
</style>